<template>
    <page-header-wrapper>
        <a-card :bordered="false" style="margin-bottom: 20px" title="搜索查询">
            <div class="table-page-search-wrapper">
                <a-form inline v-bind="queryFormItemLayout">
                    <a-row :gutter="20">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="角色">
                                <div style="display: flex;align-items: center">
                                    <a-input v-model="queryParam.role"
                                             placeholder="请输入">
                                    </a-input>
                                    <a-button style="margin-left: 10px"
                                              type="primary" @click="onSearch">
                                        查询
                                    </a-button>

                                    <a-button style="margin-left: 10px"
                                              @click="onReset">
                                        重置
                                    </a-button>
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-card>
        <a-card :bordered="false">
            <div class="table-operator">
                <div>
                    <a-button icon="plus" type="primary" @click="handleAdd">添加</a-button>
                </div>
            </div>
            <a-table
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :rowSelection="rowSelection"
                :scroll="{ x: '100%' }"
                childrenColumnName="departs"
                rowKey="id"
                @change="handleChange"
            >
        <span slot="status" slot-scope="text, record">
          <a-switch v-model="record.status"
                    @change="(value) => handleChangeSwitch(value,record)"/>
        </span>
                <span slot="action" slot-scope="text, record">
          <template>
            <a-button type="link" @click="handleMenu(record)">菜单管理</a-button>
            <a-button type="link" @click="handlePermission(record)">权限管理</a-button>
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
            <a-popconfirm cancel-text="否" ok-text="是" title="确认删除?"
                          @confirm="handleDelete(record)">
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </template>
        </span>
            </a-table>
        </a-card>
        <a-modal
            :confirmLoading="modalLoading.loading1"
            :title="modalTitle.title1"
            :visible="modalShow.show1"
            :width="640"
            @cancel="handleCancel"
            @ok="handleConfirm"
        >
            <a-form-model
                v-if="modalShow.show1"
                ref="ruleForm1"
                :model="modalForm.ruleForm1"
                :rules="modalRules.rules1"
                style="margin-bottom:20px"
                v-bind="formItemLayout"
            >
                <a-form-model-item label="名称" prop="title">
                    <a-input v-model="modalForm.ruleForm1.title"
                             placeholder="请输入"></a-input>
                </a-form-model-item>
                <a-form-model-item label="描述" prop="description">
                    <a-textarea v-model="modalForm.ruleForm1.description"
                                placeholder="请输入"/>
                </a-form-model-item>
                <a-form-model-item label="状态" prop="status">
                    <a-switch v-model="modalForm.ruleForm1.status"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-modal
            :confirmLoading="modalLoading.loading2"
            :visible="modalShow.show2"
            :width="640"
            title="权限管理"
            @cancel="handleCancel2"
            @ok="handleConfirm2"
        >
            <a-tree
                v-model="modalForm.ruleForm1.roleModels"
                :replace-fields="{
                    children: 'childList',
                    title: 'title',
                    key: 'id'
                }"
                :tree-data="moduleList"
                checkable
                @check="handleCheck"
            >
            </a-tree>
        </a-modal>
        <a-modal
            :confirmLoading="modalLoading.loading3"
            :visible="modalShow.show3"
            :width="640"
            title="菜单管理"
            @cancel="handleCancel3"
            @ok="handleConfirm3"
        >
            <a-tree
                v-model="modalForm.ruleForm1.roleMenus"
                :replace-fields="{
                    children: 'childList',
                    title: 'title',
                    key: 'id'
                }"
                :tree-data="menuList"
                checkable
                @check="handleCheck3"
            >
            </a-tree>
        </a-modal>
    </page-header-wrapper>
</template>
<script>
import basic from '@/mixins/basic'
import {
    getRolePage,
    addRole,
    updateRole,
    updateRoleStatus,
    delRole,
    getModalList,
    getMenuList,
    readRoleDetail,
    bindRolePermission,
    bindRoleMenu
} from '@/api/api'

export default {
    mixins: [basic],
    data() {
        return {
            request: {
                page: getRolePage,
                add: addRole,
                update: updateRole,
                delete: delRole
            },
            queryParam: {
                role: ''
            },
            resetQueryParam: {
                role: ''
            },
            columns: [
                {
                    title: '角色名称',
                    dataIndex: 'title'
                },
                {
                    title: '角色描述',
                    dataIndex: 'description'
                },
                {
                    title: '添加时间',
                    dataIndex: 'createTime'
                },
                {
                    title: '更新时间',
                    dataIndex: 'updateTime'
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    scopedSlots: {customRender: 'status'}
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    width: 250,
                    fixed: 'right',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            tableData: [],
            modalForm: {
                ruleForm1: {
                    id: undefined,
                    title: '',
                    roleModels: [],
                    roleMenus: [],
                    description: '',
                    status: true
                }
            },
            modalResetForm: {
                ruleForm1: {
                    id: undefined,
                    title: '',
                    roleModels: [],
                    roleMenus: [],
                    description: '',
                    status: true
                }
            },
            modalRules: {
                rules1: {
                    title: [{required: true, message: '输入不能为空'}],
                }
            },
            menuList: [],
            halfCheckedKeys: [],
            moduleList: [],
            halfCheckedKeys3: [],
        }
    },
    created() {
        getModalList().then(res => {
            this.moduleList = res
        })

        getMenuList().then(res => {
            this.menuList = res
        })
    },
    methods: {
        handleCheck(a, b, c) {
            console.log(a, b, c)
            this.halfCheckedKeys = b.halfCheckedKeys
        },
        handleCheck3(a, b, c) {
            console.log(a, b, c)
            this.halfCheckedKeys3 = b.halfCheckedKeys
        },
        formattData(data) {
            data.forEach(el => {
                el.status = el.status == 0
            })
        },
        handleChangeSwitch(value, record) {
            updateRoleStatus({
                id: record.id,
                status: record.status ? 0 : 1
            })
                .then(res => {
                    this.$message.success('修改状态成功')
                })
                .catch(() => {
                    record.status = !record.status
                })
        },
        handleEdit(rowItem) {
            for (const key in this.modalForm.ruleForm1) {
                this.modalForm.ruleForm1[key] = rowItem[key]
            }
            this.modalTitle.title1 = '修改'
            this.modalShow.show1 = true
        },
        handleConfirm() {
            this.$refs.ruleForm1.validate((valid) => {
                if (valid) {
                    this.modalLoading.loading1 = true
                    let form = {
                        ...this.modalForm.ruleForm1,
                        status: this.modalForm.ruleForm1.status ? 0 : 1
                    }
                    this.request[this.modalForm.ruleForm1.id ? 'update' : 'add']({
                        ...form
                    }).then(res => {
                        this.$message.success(res.msg)
                        this.modalLoading.loading1 = false
                        this.onValidate('ruleForm1')
                        this.modalShow.show1 = false
                        this.onSearch()
                    }).catch(() => {
                        this.modalLoading.loading1 = false
                    })
                }
            })
        },
        handlePermission(rowItem) {
            readRoleDetail(rowItem.id).then(res => {
                let ids = [];
                (res.roleModels || []).forEach(el1 => {
                    if (el1.childList && el1.childList.length) {
                        (el1.childList || []).forEach(el2 => {
                            ids.push(el2.modelsId)
                        })
                    } else {
                        ids.push(el1.modelsId)
                    }

                })
                this.modalForm.ruleForm1 = {
                    ...rowItem,
                    roleModels: ids
                }
                console.log(this.modalForm.ruleForm1.roleModels, this.moduleList)
                this.modalShow.show2 = true
            })
        },
        handleConfirm2() {
            this.modalLoading.loading2 = true
            bindRolePermission({
                roleId: this.modalForm.ruleForm1.id,
                roleIdList: [...this.halfCheckedKeys, ...this.modalForm.ruleForm1.roleModels]
            }).then(res => {
                this.$message.success(res.msg)
                this.modalShow.show2 = false
                this.modalLoading.loading2 = false
            }).catch(() => {
                this.modalLoading.loading2 = false
            })
        },
        handleMenu(rowItem) {
            readRoleDetail(rowItem.id).then(res => {
                let ids = [];
                (res.roleMenus || []).forEach(el1 => {
                    if (el1.childList && el1.childList.length) {
                        (el1.childList || []).forEach(el2 => {
                            ids.push(el2.menuId)
                        })
                    } else {
                        ids.push(el1.menuId)
                    }
                })

                this.modalForm.ruleForm1 = {
                    ...rowItem,
                    roleMenus: ids
                }
                this.modalShow.show3 = true
            })

        },
        handleConfirm3() {
            this.modalLoading.loading3 = true
            bindRoleMenu({
                roleId: this.modalForm.ruleForm1.id,
                roleIdList: [...this.halfCheckedKeys3, ...this.modalForm.ruleForm1.roleMenus]
            }).then(res => {
                this.$message.success(res.msg)
                this.modalShow.show3 = false
                this.modalLoading.loading3 = false
            }).catch(() => {
                this.modalLoading.loading3 = false
            })
        },
        handleCancel3() {
            this.modalShow.show3 = false
        },
        handleCancel2() {
            this.modalShow.show2 = false
        },
    }
}
</script>
